import React from 'react';
import styled from 'styled-components';
import StyleFooter from './StyleFooter';

import StyleInput from './StyleInput';

// 扩展
const StyleFooterExt = styled(StyleFooter)`
  background-color: yellow;
`;

const App = () => {
  return (
    <div>
      <h1>App1</h1>
      <div>
        <StyleInput
          type="text"
          name="username"
          placeholder="用户名"
        />
        <StyleInput
          type="password"
          name="password"
          placeholder="密码"
        />
      </div>
      <div>
        <StyleFooter myHeight="200px" />
        <StyleFooter
          myHeight="300px"
          myBackground="blue"
        />
        <StyleFooterExt
          myHeight="100px"
          myBackground="blue"
        />
      </div>
    </div>
  );
};

export default App;
